<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            height: 5000px;
        }
    </style>
</head>
<body>
    <!-- 
        

        div           标签 标记 元素
        class="box"   属性(写在标签内 和标签名以一个空格分隔的叫做属性(属性名="属性值") 可以没有,也可以有多个,多个之前用空格分隔)
        123123        文本

        注释


     -->

    <div id="demo" class="box" title="hello">123123</div>
    <!-- <div class="box">123123</div> -->
</body>
<script>
    // DOM (Document Object Model) 文档对象模型  -> 提供了操作文档的接口(方法)
    //      获取元素 操作元素(改变元素的内容 属性 样式 绑定事件) 元素新增 元素删除 元素替换 克隆 (DOM操作)

    // window -> document
    // 页面载入到浏览器中就会变为文档的一部分
    // 通过document可以 访问页面所有的元素


    // DOM分类:
    // 核心 DOM - 针对任何结构化文档的标准模型 
    // XML DOM - 针对 XML 文档的标准模型 
    // HTML DOM - 针对 HTML 文档的标准模型 
    
    // HTML DOM   => 对html页面元素的增删改查  (DOM操作)

    // DOM 节点: 
    // 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点:
    // 整个文档是一个文档节点      => document
    // 每个 HTML 元素是元素节点 
    // 每个 HTML 属性是属性节点 
    // HTML 元素内的文本是文本节点 
    // 注释是注释节点 

    // 所有的节点都是对象类型

    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点

    // 根节点(html)



</script>
</html>